<template>
  <div>
    <!-- 搜索 -->
    <HeadSeach ref="headSeach" />
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBatch">删除 </el-button>
        <Content>
          <el-table ref="table" :data="list.data" style="width: 100%" size="small" row-key="id" @selection-change="selectionChange">
            <el-table-column type="selection" min-width="30" />
            <el-table-column label="状态" min-width="40">
              <template slot-scope="scope">
                <div v-if="scope.row.status === 1" class="success_row">是</div>
                <div v-if="scope.row.status === 0" class="danger_row">否</div>
              </template>
            </el-table-column>
            <el-table-column label="店铺编码" min-width="90" prop="store_sn" />
            <el-table-column label="店铺名称" min-width="60" prop="store_name" />
            <el-table-column label="店铺简称" min-width="60" prop="short_name" />
            <el-table-column label="店铺类别" min-width="60" prop="store_type">
              <template slot-scope="scope">
                {{ scope.row.store_type===1?'天猫':'淘宝' }}
              </template>
            </el-table-column>
            <el-table-column label="主账号" min-width="60" prop="account" />
            <el-table-column label="同步发货" min-width="60" prop="order_authority" header-align="center" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.order_authority" @change="changeStock(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="同步库存" min-width="60" prop="stock_authority" header-align="center" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.stock_authority" @change="changeStock(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="同步售后单" min-width="60" prop="refund_order_authority" header-align="center" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.refund_order_authority" @change="changeStock(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="联系电话" min-width="80" prop="phone" />
            <el-table-column label="发货地址" min-width="100" prop="address" />
            <el-table-column label="创建时间" min-width="80" prop="create_time" />
            <el-table-column label="操作" min-width="60">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="edit(scope.row.id)">编辑</el-link>
                <el-link type="danger" :underline="false" @click="delValue(scope.row.id)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <Pagination ref="pagination" />
        </Content>
      </div>
    </div>
    <!-- 新增/编辑-->
    <el-drawer :visible.sync="dialogAdminVisible" direction="rtl" class="darwer" :wrapper-closable="false">
      <div slot="title">{{ param.id?'编辑':'新增' }}店铺 <el-switch v-model="param.status" /></div>
      <div class="dis-flex darwer-add flex-y-center">
        <i class="el-icon-info info" />
        <p>请谨慎设置店铺信息，以免影响店铺数据对接</p>
      </div>
      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>店铺类型</label>
        <div class="flex-box">
          <el-select v-model="param.store_type" placeholder="店铺类型" filterable size="small">
            <el-option value="" label="请选择店铺类型" />
            <el-option :value="1" label="天猫" />
            <el-option :value="2" label="淘宝" />
          </el-select>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>店铺名称</label>
        <div class="flex-box">
          <el-input v-model="param.store_name" placeholder="请输入店铺名称" size="small" :autofocus="true" />
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>店铺简称</label>
        <div class="flex-box">
          <el-input v-model="param.short_name" placeholder="请输入店铺简称" size="small" :autofocus="true" />
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label>主账号</label>
        <div class="flex-box">
          <el-input v-model="param.account" placeholder="请输入主账号" size="small" />
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label>发货地址</label>
        <div class="flex-box">
          <el-input v-model="param.address" placeholder="请输入发货地址" size="small" />
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label>退货地址</label>
        <div class="flex-box">
          <el-input v-model="param.refund_address" placeholder="请输入退货地址" size="small" />
        </div>
      </div>
      <div class="hr">
        <div class="checkboxAuthority">
          <el-checkbox v-model="param.order_authority">同步发货</el-checkbox>
          <p>系统发货后，自动同步快递公司和快递单号至平台</p>
        </div>
        <div class="checkboxAuthority">
          <el-checkbox v-model="param.stock_authority">自动上传库存</el-checkbox>
          <p>系统同步库存信息至平台，库存系统发生变动时触发</p>
        </div>
        <div class="checkboxAuthority">
          <el-checkbox v-model="param.refund_order_authority">自动下载售后单</el-checkbox>
          <p>将平台的售后单信息下载进系统，可进入【售后管理】页面查看</p>
        </div>
      </div>
      <div class="dis-flex flex-x-end operation">
        <el-button size="small" @click="dialogAdminVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="determine()">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { Store } from '@/api/store'
import { deleteValue } from '@/utils/public'
import Pagination from '@/components/Pagination'
import HeadSeach from '@/components/HeadSeach'
export default {
  name: 'StoreList',
  components: {
    Pagination,
    HeadSeach
  },
  data() {
    return {
      seach: {},
      list: {
        data: []
      },
      selectId: [],
      dialogAdminVisible: false,
      param: {},
      pagination: {
        page: 1,
        per_page: 30
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.assembleSeachData()
  },
  methods: {
    // 组装搜索数据
    async assembleSeachData() {
      const searchData = {
        label: '店铺搜索',
        size: 'small',
        model: {
          status: '',
          store_type: '',
          store_name: '',
          account: ''
        },
        options: [
          {
            tag: 'Select',
            prop: 'status',
            placeholder: '店铺状态',
            data: [{ label: '启用', value: '1' }, { label: '禁用', value: '0' }],
            showPropData: {
              label: 'label',
              value: 'value'
            }
          },
          {
            tag: 'Select',
            prop: 'store_type',
            placeholder: '店铺类型',
            data: [{ label: '天猫', value: '1' }, { label: '淘宝', value: '2' }],
            showPropData: {
              label: 'storage_name',
              value: 'storage_sn'
            }
          },
          {
            tag: 'Input',
            prop: 'store_name',
            placeholder: '店铺名称'
          },
          {
            tag: 'Input',
            prop: 'account',
            placeholder: '平台账号'
          }
        ],
        cb: (data) => {
          this.seach = data
          this.pagination.page = 1
          this.getList()
        }
      }
      this.$refs.headSeach.init(searchData)
    },
    // 获取店铺列表
    getList() {
      Store.pageStore({ ...this.pagination, ...this.seach }).then((res) => {
        res.data.data.forEach(ele => {
          ele.order_authority = ele.order_authority !== 0
          ele.stock_authority = ele.stock_authority !== 0
          ele.refund_order_authority = ele.refund_order_authority !== 0
        })
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getList()
      } })
    },
    // 搜索
    searchBox(val) {
      if (val === 'reset') {
        this.seach = {}
        this.currentPage = 1
      }
      this.getList()
    },
    // 删除
    delBatch() {
      if (this.selectId.length === 0) {
        this.$message.error('请先选择后在进行操作！')
        return false
      }
      this.delValue(this.selectId.join(','))
    },
    delValue(id) {
      deleteValue({
        _this: this,
        success: (res) => {
          Store.delStore({ id }).then((res) => {
            this.$message.success('删除成功')
            this.getList()
          }).catch(() => {})
        }
      })
    },
    // 新增
    add() {
      this.param = {}
      this.dialogAdminVisible = true
    },
    // 编辑
    edit(id) {
      Store.getStore({ id }).then((res) => {
        res.data.status = res.data.status !== 0
        res.data.order_authority = res.data.order_authority !== 0
        res.data.stock_authority = res.data.stock_authority !== 0
        res.data.refund_order_authority = res.data.refund_order_authority !== 0
        this.param = res.data
        this.dialogAdminVisible = true
      }).catch(() => {})
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.id)
    },
    // 修改同步
    changeStock(val) {
      this.determine(val)
    },
    determine(val) {
      const param = val || this.param
      param.status = param.status ? 1 : 0
      param.order_authority = param.order_authority ? 1 : 0
      param.stock_authority = param.stock_authority ? 1 : 0
      param.refund_order_authority = param.refund_order_authority ? 1 : 0
      Store.addStore(param).then((res) => {
        this.$message.success('保存成功')
        this.dialogAdminVisible = false
        this.getList()
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.darwer{
  ::v-deep .el-drawer__header{
  margin-bottom: 10px;
  padding: 15px;
  border-bottom: 1px solid #F0F0F0;
  font-weight: 600;
}
::v-deep :focus {
  outline: 0;
}
  .darwer-add{
    background: rgba(224, 32, 32, 0.1);
    border: 1px solid rgba(224, 32, 32, 0.5);
    font-size: 12px;
    color: #666666;
    margin: 0 16px;
    padding:5px 0 5px  15px;
    border-radius: 6px;
    .info{
      color: #E02020;
      font-size: 16px;
      margin-right: 10px;
    }
    p{
     margin: 0;
    }
  }
   .darwer-area{
    margin-top: 20px;
    font-size: 12px;
    label{
      margin: 10px 30px 0 60px;
      min-width:60px;
      text-align: right;
    }
    .flex-box{
      flex: 1;
      margin-right: 100px;
      }
   }
   .hr{
     border-top: 1px solid #EEEEEE;
     margin: 20px 60px;
     .checkboxAuthority{
       margin-top: 20px;
       p{
         margin:5px 0 0 20px;
         font-size: 12px;
         color: #999999;
       }
     }
   }
   .operation{
     margin-right: 50px;
   }
}
</style>
